<script setup>


import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const props = defineProps({
  roleInfos: {
    type: Array,
    required: true,
  },
  pageNum: {
    type: Number,
    required: true,
  }, // 第几页
  pageSize: {
    type: Number,
    required: true,
  }, // 每页显示几条
  total: {
    type: Number,
    required: true,
  } // 总记录数
});

// 处理翻页，参数就是当前页码
const emit = defineEmits();
const handleCurrentChange = (pageNum) => {
  emit('change-page', pageNum);
};

const handleSizeChange = (pageSize) => {
  emit('change-page-size', pageSize);
};
const show4EditData = (row) => {
  emit('show4EditData', row);
};

// 分配权限====================================================================================================
const assignPermissionVisible = ref(false)

let roleId;
// 显示分配角色弹窗的方法
const show4Assign = async (role) => {
  try {
    rolePermissionIds.value = null;
    roleId = role.roleId;

    // 获取权限树并设置到响应式数据
    const resp = await axios.get('/permission/getPermissions');
    permissionTree.value = resp.data;

    // 根据角色获取已分配的权限ID并设置到响应式数据
    const respById = await axios.get(`/permission/getPermissionIdByRole/${roleId}`);
    rolePermissionIds.value = respById.data;

    // 显示分配权限弹窗
    assignPermissionVisible.value = true;
  } catch (errorMsg) {
    ElMessage.warning(errorMsg.message);
  }
};

//分配角色
const assignPermission = () => {
  let permissionIds = treeRef.value.getCheckedKeys();
  axios.post('/permission/assignPermission', {
    roleId,
    permissionIds
  })
      .then(() => {
        ElMessage.success("分配权限成功!");
        assignPermissionVisible.value = false;
      })
      .catch(errorMsg => {
        ElMessage.warning("分配权限失败，原因是：" + errorMsg.message);
      })
}

const rolePermissionIds = ref([])
const defaultProps = {
  id: 'roleId',
  children: 'children',
  label: 'pname',
}

const permissionTree = ref([])

const treeRef = ref(null)


const handleCheckChanged = (permission, checked) => {
  if (checked) {
    treeRef.value.setChecked(permission.parentId, true);
  } else if (permission.children) {
    permission.children.forEach(child => {
      treeRef.value.setChecked(child.id, false);
    })
  }
}

//==============================批量禁用========================================================================================
const deleteIds = ref([])
const  handleselectionChange=val=>{
  deleteIds.value=val.map(item=>item.roleId)
  batchDelete()
};

const batchDelete=()=>{
  emit('batchDelete',deleteIds.value)
}



</script>

<template>

  <el-table :data="roleInfos" border fit style="width: 100%" @selection-change="handleselectionChange">
    <el-table-column type="selection" width="40"></el-table-column>
    <el-table-column prop="roleName" label="职务名"></el-table-column>
    <el-table-column prop="roleKey" label="职务编码"></el-table-column>
    <!-- 状态列 -->
    <el-table-column label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status==0" type="success" >正常</el-tag>
          <el-tag v-else type="warning">停用</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"></el-table-column>
    <el-table-column prop="remark" label="备注"></el-table-column>
    <el-table-column fixed='right' label="操作" min-width="150">
      <template #default="scope">
        <el-button size="small" type="primary" @click="show4EditData(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="show4Assign(scope.row)">
          权限管理
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="margin-top: 20px"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"

  />


  <!--分配权限弹窗 开始---------------------------------------------------------------------------------------->
  <el-dialog v-model="assignPermissionVisible" title="分配权限" width="600" center>
    <template #footer>

      <el-tree
          style="max-width: 600px"
          :data="permissionTree"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="rolePermissionIds"
          :props="defaultProps"
          :check-strictly="true"
          @check-change="handleCheckChanged"
          ref="treeRef"
      ></el-tree>


      <div class="dialog-footer">
        <el-button @click="assignPermissionVisible = false">取消</el-button>
        <el-button type="primary" @click="assignPermission">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--分配角色弹窗 结束-->
</template>

<style scoped>

</style>